<template>
	<view class="cu-form-group margin-top">
		<view class="title">{{props.title}}</view>
		<input @input="handleKeyInput" v-model="props.value" :placeholder="props.placeholder" name="input"></input>
		<button @click="handleClick" v-if="props.buttonText.length>0" class='cu-btn bg-green shadow'>{{props.buttonText}}</button>
	</view>
</template>

<script setup lang="ts">
	const emit = defineEmits(['action','input']);
	const props = defineProps({
		title: {
			type: String,
			default: '标题'
		},
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入内容'
		},
		buttonText: {
			type: String,
			default: ''
		}
	})
	const handleKeyInput = (e:any) => {
		emit('input', e.target.value)
	}
	const handleClick = (e:any) => {
		emit('action', e)
	}
</script>

<style scoped>
	.cu-bar {
		min-height: 30px;
	}
</style>
